<script setup lang="ts">
const props = defineProps<{
  icon?: string;
  title?: string;
  action?: string;
  headerClass?: string;
  titleClass?: string;
  bodyClass?: string;
}>();
const emits = defineEmits<{
  act: [];
}>();
</script>

<template>
  <div class="flex flex-col rounded-2 bg-[#131416] p-4 card-shadow">
    <!-- 头部 -->
    <div
      v-if="props.icon || props.title || props.action || $slots.header || $slots.action"
      class="mb-3 flex items-center text-base"
      :class="{ [props.headerClass ?? '']: true }"
    >
      <slot name="header">
        <!-- 图标 -->
        <div v-if="props.icon" class="mr-2 text-[1.15em] text-[#848A9D]">
          <i class="block" :class="props.icon" />
        </div>
        <!-- 标题 -->
        <div v-if="props.title" class="mr-auto" :class="props.titleClass">
          {{ props.title }}
        </div>
        <!-- 操作 -->
        <div v-if="(typeof props.action === 'string') || $slots.action" class="flex items-center" @click="emits('act')">
          <slot name="action">
            <span class="text-sm text-yellow">{{ props.action }}</span>&nbsp;
            <span class="text-[#848A9D]"><i class="i-ion:ios-arrow-forward block" /></span>
          </slot>
        </div>
      </slot>
    </div>

    <!-- 内容 -->
    <div class="flex-1" :class="props.bodyClass">
      <slot />
    </div>
  </div>
</template>
